<!doctype html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='chrome=1,IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <meta name='renderer' content='webkit'>
    <meta name='keywords' content=''> 
    <meta name='description' content=''>
    <title>联通后台-用户登录</title>
    <link rel='icon' type='image/png' href='../Image/web-logo-tag.png'>
    <link rel='stylesheet' type='text/css' href='../plugin/Bootstrap/css/bootstrap.min.css'>
    <link rel='stylesheet' type='text/css' href='../plugin/FontAwesome/css/font-awesome.min.css'>
    <link rel='stylesheet' type='text/css' href='../css/bootstrap.dev.css'>
    <script type='text/javascript' src='../plugin/Jquery/jquery-2.0.min.js'></script>
    <script type='text/javascript' src='../plugin/Bootstrap/js/bootstrap.min.js'></script>
    <style type="text/css">
    body {
        font-family:  "sans-serif", "微软雅黑";
        font-weight: normal;
        font-size: 13px;
    }
    .container {
        width: 1000px;
    }
    .header {
        background-color: #FFF;
        height: 60px;
        color: #838c8b;
    }
    .header > .container > div {
        display: inline-block;
    }
    .header .logo {
        width: 200px;
        height: 60px;
        line-height: 60px;
        float: left;
    }
    .header .title {
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        float: left;
        letter-spacing: 1px;
    }
    .header .user {
        width: 80px;
        height: 60px;
        line-height: 60px;
        float: right;
    }
    .header .user .si-xs {
        float: left;
        margin-top: 22px;
        margin-right: 5px;
    }
    .header .user .fa {
        margin-top: 22px;
        cursor: pointer;
        font-size: 14px;
    }

    .content {
        background-color: #fff;
        border: #CCC 1px solid;
    }
    .content > .row {
        padding: 40px 0px;
    }

    .footer {
        text-align: center;
        color: #999;
        padding: 30px 0px;
    }
    
    .si-xs {
        display: inline-block;
        width: 16px;
        height: 16px;
    }
    .si-user {
        background: url(../image/user-logo-default.png) no-repeat;
        background-size: 100% 100%;
    }

    .carousel {
        padding-left: 0px;
    }
    .carousel > .carousel-indicators {
        bottom: -30px;
    }
    .carousel > .carousel-indicators > li {
        background-color: #CCC;
        border-color: #CCC;
    }
    .carousel > .carousel-indicators > li.active {
        background-color: #F33;
        border-color: #F33;
    }
    
    .box-form {
        padding-left: 80px;
    }
    .box-form > .title {
        font-size: 18px;
        color: #04c5b0;
        margin: 15px 0px;
    }
    .box-form > .table {
        width: 280px;
    }
    .box-form > .table .td-label {
        padding-left: 0px;
        color: #333;
        width: 60px;
        font-size: 14px;
    }
    </style>
</head>

<body>
    <div class='header'>
        <div class='container'>
            <div class='logo'>
                <img src='../Image/web-logo.png'>
            </div>
            <div class='title'>
                新疆联通O2O营销体系
            </div>
            <div class='user'>
                <i class='si-xs si-user'></i>
                登录
                <i class='fa fa-angle-down pull-right'></i>
            </div>
        </div>
    </div>
    
    <div class='container content'>
        <div class='row'>
            <div class='col-md-6' style='border-right: #EEE 1px solid;'>
                <div class='carousel slide' id='loop'>
                    <ol class='carousel-indicators'>
                        <li data-target='#loop' data-slide-to='0' class='active'></li>
                        <li data-target='#loop' data-slide-to='1'></li>
                        <li data-target='#loop' data-slide-to='2'></li>
                    </ol>

                    <div class='carousel-inner'>
                        <div class='item active'>
                            <img src='../Image/loop-1.png'>
                        </div>
                        <div class='item'>
                            <img src='../Image/loop-2.png'>
                        </div>
                        <div class='item'>
                            <img src='../Image/loop-3.png'>
                        </div>
                    </div>

                </div>
            </div>
            <div class='col-md-6 box-form'>
                <div class='title'>用户登录</div>
                <table class='table table-va-middle table-no-border'>
                    <tr>
                        <td class='td-label'>用户名:</td>
                        <td>
                            <input type='text' class='form-control input-sm input-w-md' name='username'
                                placeholder='手机/邮箱/固网'>
                        </td>
                    </tr>
                    <tr>
                        <td class='td-label'>密&nbsp;&nbsp;&nbsp;码:</td>
                        <td>
                            <input type='text' class='form-control input-sm input-w-md' name='password'
                                placeholder='登录密码'>
                        </td>
                    </tr>
                    <tr>
                        <td class='td-label' colspan='2'>
                            <span class='box-checkbox'>
                                <input type='checkbox' name='remeberMe'>
                                <span class='text-info'>记住我的登录信息</span>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td class='td-label' colspan='2'>
                            <button class='btn btn-md btn-success btn-block'>立即登录</button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <div class='container footer'>
        Copyright@ 1999-2016 中国联通 版权所有
    </div>
</body>

<script type="text/javascript">
var domBg;
$(document).ready(function(){
    //body背景设置
    domBg   = $('<div></div>');
    domBg.css('width', '100%')
        .css('height', $(window).height() * 0.5)
        .css('background-color', '#04c5b0')
        .css('position', 'absolute')
        .css('left', '0px')
        .css('top', '0px')
        .css('z-index', '-1');
    $('body').append(domBg);

    $('.content').css('margin-top', ($(window).height() - $('.content').height() - 60) * 0.5);
});

window.onresize     = function(){
    domBg.css('height', $(window).height() * 0.5);
    $('.content').css('margin-top', ($(window).height() - $('.content').height() - 60) * 0.5);
}
</script>
</html>